<template>
    <div style="width: 100%; height: 100vh;background-color: white">
        <div style=""><hr><div class="row"><div class="col-md-12 text-center"><h3>在线免费文字转语音系统</h3></div></div><hr><div class="row">
            <div class="col-md-6 col-xs-offset-3">
                <textarea id="shuru" class="form-control" rows="3" placeholder="请输入中文：" v-model="nr" style="margin: 0px 16px 0px 0px; width: 540px; height: 103px;"></textarea></div></div><hr>
            <div class="row">
                <div class="col-md-2 col-xs-offset-2">
                    <select class="form-control" autocomplete="off" id="yindiao" v-model="yindiao">
                        <option disabled selected>---请选择---</option>
                        <option value="1">音调1</option>
                        <option value="2">音调2</option>
                        <option value="3">音调3</option>
                        <option value="4">音调4</option>
                        <option value="5">音调5</option>
                    </select>
                    <select class="form-control" autocomplete="off" id="yusu" v-model="yusu">
                        <option value="1" >语速1</option>
                        <option value="2">语速2</option>
                        <option value="3">语速3</option>
                        <option value="4">语速4</option>
                        <option value="5">语速5</option>
                    </select>
                </div><div data-toggle="buttons" class="btn-group col-md-4">
    <!--<label class="btn btn-primary active"><input type="radio" checked="" autocomplete="off" value="1" id="options1" name="options">标准男声-->
    <!--</label><label class="btn btn-primary"><input type="radio" autocomplete="off" value="0" id="options2" name="options">标准女生-->
    <!--</label><label class="btn btn-primary"><input type="radio" autocomplete="off" value="3" id="options3" name="options">情感男声-->
    <!--</label><label class="btn btn-primary"><input type="radio" autocomplete="off" value="4" id="options4" name="options">情感女生-->
    <!--</label>-->
        </div>
            <div class="col-md-1">
                <button type="button" id="tijiao" class="btn btn-success" @click="zt">暂停</button>
                <button type="button" id="tijiao2" class="btn btn-success" @click="hc">开始朗读</button>
                <button type="button" id="tijiao3" class="btn btn-success" @click="cz">重置</button>
            </div></div>
            <div class="row text-center"><span class="alert-warning"><h4>↓ 文字转换的语音文件将显示在此处（右键另存为） ↓ </h4></span>

            </div>
        </div>
        <div class="a">完善中........</div>
        <!--<audio id="sound0" autoplay="true" controls="true" style="margin-top: 16px; width: 300px;" src="/api/tts/?text=嘿老兄,你什么都没有输入,你让我转换什么.&amp;yusu=3&amp;fayin=1&amp;key=1c4afc684e6b70670d883130c0111ed8&amp;audio=bugscaner-tts-auido.mp3"></audio>-->
    </div>
</template>

<script>
    // import '../../../../assets/js/tool/music';
    // import $ from 'jquery'
    export default {
        name: "music",
        data(){
          return{
              nr:'',
              utter:'',
              yusu:1,
              yindiao:1,
          }
        },
        created(){
        },
        methods:{
            hc:function () {
                this.utter = new window.SpeechSynthesisUtterance(this.nr)
                // this.utter.lang='zh-CH'
                this.utter.rate=this.yusu
                this.utter.pitch=this.yindiao
                this.utter.lang='zh-GB'
                console.log(window.speechSynthesis.getVoices())
                // window.speechSynthesisVoice
                window.speechSynthesis.speak(this.utter)
            },
            zt:function () {
              window.speechSynthesis.stop(this.utter)
            },
            cz:function () {
                window.speechSynthesis.cancel(this.utter)
            }
        },
        mounted(){

        }
    }

</script>

<style scoped>

    @import "../../../css/tool/music.css";
    .a audio{
        display: block !important;
    }
</style>